// 剪裁框
// - 找到剪裁区的图片 （img#image）
// - 设置配置项



// - 调用cropper方法，创建剪裁区
let image = $('#image');
let option = {
  aspectRatio: 1,
  preview: '.img-preview '
}
image.cropper(option);

// 点击上传触发文件域
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click')
});

// 选择图片，更新裁剪
$('#file').on('change', function () {
  if (this.files.length > 0) {
    let fileObj = this.files[0];
    // 为文件对象创建临时的url
    let url = URL.createObjectURL(fileObj);
    image.cropper('replace', url);
  }
});


// 完成更换图片
$('button:contains("确定")').on('click', function () {
  // 剪裁图片，得到canvas
  let canvas = image.cropper('getCroppedCanvas', {
    width: 30,
    height: 30
  });
  // 把canvas转成base64格式字符串
  let base64 = canvas.toDataURL();

  axios.post('/my/user/avatar', `avatar=${encodeURIComponent(base64)}`).then(res => {
    let {
      status,
      message
    } = res.data;
    if (status === 0) {
      layer.msg(message);
      window.parent.getUserInfo();
    }
  })
});